import 'package:flutter/material.dart';
import 'package:netflix_social/constants/app_constants.dart';
import 'package:netflix_social/providers/auth_provider.dart';
import 'package:netflix_social/theme/app_theme.dart';
import 'package:provider/provider.dart';

class NotificationsScreen extends StatefulWidget {
  const NotificationsScreen({Key? key}) : super(key: key);

  @override
  State<NotificationsScreen> createState() => _NotificationsScreenState();
}

class _NotificationsScreenState extends State<NotificationsScreen> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppTheme.backgroundColor,
      appBar: AppBar(
        backgroundColor: AppTheme.backgroundColor,
        title: const Text('通知'),
        bottom: TabBar(
          controller: _tabController,
          indicatorColor: AppTheme.netflixRed,
          labelColor: Colors.white,
          unselectedLabelColor: Colors.grey,
          tabs: const [
            Tab(text: '全部'),
            Tab(text: '社交'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          // 全部通知
          _buildAllNotifications(),
          // 社交通知
          _buildSocialNotifications(),
        ],
      ),
    );
  }

  Widget _buildAllNotifications() {
    // 模拟通知数据
    final notifications = [
      {
        'type': 'system',
        'title': '会员特权',
        'content': '尊敬的用户，您的VIP会员即将到期，点击续费享受优惠。',
        'time': '1小时前',
        'isRead': false,
        'icon': Icons.card_membership,
        'iconColor': Colors.amber,
      },
      {
        'type': 'video',
        'title': '新上线',
        'content': '《流浪地球2》已上线，快来观看吧！',
        'time': '3小时前',
        'isRead': true,
        'icon': Icons.movie,
        'iconColor': AppTheme.netflixRed,
      },
      {
        'type': 'social',
        'title': '新粉丝',
        'content': '张三关注了你，点击查看他的主页。',
        'time': '昨天',
        'isRead': false,
        'icon': Icons.person_add,
        'iconColor': Colors.blue,
      },
      {
        'type': 'social',
        'title': '新评论',
        'content': '李四评论了你的动态："这部电影太精彩了！"',
        'time': '昨天',
        'isRead': true,
        'icon': Icons.comment,
        'iconColor': Colors.green,
      },
      {
        'type': 'video',
        'title': '继续观看',
        'content': '您上次观看的《黑镜》第3季第2集已准备就绪。',
        'time': '2天前',
        'isRead': true,
        'icon': Icons.play_circle_filled,
        'iconColor': AppTheme.netflixRed,
      },
    ];

    if (notifications.isEmpty) {
      return _buildEmptyState('暂无通知', '您的所有通知将会显示在这里');
    }

    return ListView.builder(
      padding: const EdgeInsets.all(0),
      itemCount: notifications.length,
      itemBuilder: (context, index) {
        final notification = notifications[index];
        return _buildNotificationItem(notification);
      },
    );
  }

  Widget _buildSocialNotifications() {
    // 过滤出社交类型的通知
    final notifications = [
      {
        'type': 'social',
        'title': '新粉丝',
        'content': '张三关注了你，点击查看他的主页。',
        'time': '昨天',
        'isRead': false,
        'icon': Icons.person_add,
        'iconColor': Colors.blue,
      },
      {
        'type': 'social',
        'title': '新评论',
        'content': '李四评论了你的动态："这部电影太精彩了！"',
        'time': '昨天',
        'isRead': true,
        'icon': Icons.comment,
        'iconColor': Colors.green,
      },
      {
        'type': 'social',
        'title': '点赞',
        'content': '王五点赞了你的动态。',
        'time': '3天前',
        'isRead': true,
        'icon': Icons.favorite,
        'iconColor': Colors.red,
      },
      {
        'type': 'social',
        'title': '好友动态',
        'content': '赵六分享了一部新电影《三体》。',
        'time': '5天前',
        'isRead': true,
        'icon': Icons.share,
        'iconColor': Colors.purple,
      },
    ];

    if (notifications.isEmpty) {
      return _buildEmptyState('暂无社交通知', '您的所有社交相关通知将会显示在这里');
    }

    return ListView.builder(
      padding: const EdgeInsets.all(0),
      itemCount: notifications.length,
      itemBuilder: (context, index) {
        final notification = notifications[index];
        return _buildNotificationItem(notification);
      },
    );
  }

  Widget _buildNotificationItem(Map<String, dynamic> notification) {
    return Container(
      margin: const EdgeInsets.only(bottom: 1),
      color: notification['isRead'] == true 
          ? AppTheme.backgroundColor 
          : AppTheme.cardColor,
      child: ListTile(
        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        leading: Container(
          width: 40,
          height: 40,
          decoration: BoxDecoration(
            color: (notification['iconColor'] as Color).withOpacity(0.2),
            shape: BoxShape.circle,
          ),
          child: Icon(
            notification['icon'] as IconData,
            color: notification['iconColor'] as Color,
          ),
        ),
        title: Text(
          notification['title'] as String,
          style: const TextStyle(
            fontWeight: FontWeight.bold,
          ),
        ),
        subtitle: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 4),
            Text(notification['content'] as String),
            const SizedBox(height: 4),
            Text(
              notification['time'] as String,
              style: TextStyle(
                color: Colors.grey[500],
                fontSize: 12,
              ),
            ),
          ],
        ),
        onTap: () {
          // 标记为已读并处理点击事件
          // 根据不同类型的通知执行不同的操作
          final type = notification['type'] as String;
          
          switch (type) {
            case 'system':
              // 系统通知，可能导航到设置或会员页面
              break;
            case 'video':
              // 视频通知，导航到视频详情页
              Navigator.pushNamed(
                context, 
                AppConstants.videoDetailRoute,
                arguments: '123', // 实际应用中应该从通知中获取videoId
              );
              break;
            case 'social':
              // 社交通知，可能导航到用户资料或帖子详情
              break;
            default:
              break;
          }
        },
      ),
    );
  }

  Widget _buildEmptyState(String title, String subtitle) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.notifications_none,
            size: 70,
            color: Colors.grey[700],
          ),
          const SizedBox(height: 16),
          Text(
            title,
            style: Theme.of(context).textTheme.titleLarge?.copyWith(
                  color: Colors.grey[400],
                ),
          ),
          const SizedBox(height: 8),
          Text(
            subtitle,
            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                  color: Colors.grey[600],
                ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}
